<template>
  <div class="list-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="公司名称">
        <el-input v-model="formInline.countryName" placeholder="公司名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="openadd">新增</el-button>
      </el-form-item>
    </el-form>


    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">

            <el-form-item label="主营任务">
              <span>{{ props.row.mainBusiness }}</span>
            </el-form-item>
            <el-form-item label="公司链接">
              <span>{{ props.row.countryWebaddress }}</span>
            </el-form-item>
            <el-form-item label="公司所在省份">
              <span>{{ props.row.distName }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          prop="typeName"
          label="所属行业"
          width="180">
      </el-table-column>
      <el-table-column
          prop="countryName"
          label="公司名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="chairmanGroup"
          label="集团主席"
          width="180">
      </el-table-column>
      <el-table-column
          prop="countryLogo"
          label="公司logo"
          width="180">
        <template v-slot="scope">
          <el-image :src="scope.row.countryLogo"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


<!--  分页  -->

    <el-pagination
        @current-change="handleCurrentChange"
        :page-size="formInline.pageSize"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>

<!--  添加  -->
    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="公司名称" :label-width="formLabelWidth">
          <el-input v-model="form.countryName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属行业" :label-width="formLabelWidth">
          <el-select v-model="form.countryTid" placeholder="请选择活动区域">
            <el-option :label="obj.typeName" :value="obj.typeId" :key="obj.typeId" v-for="obj in typeList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="集团主席" :label-width="formLabelWidth">
          <el-input v-model="form.chairmanGroup" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主营任务" :label-width="formLabelWidth">
          <el-input v-model="form.mainBusiness" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司链接" :label-width="formLabelWidth">
          <el-input v-model="form.countryWebaddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司地址" :label-width="formLabelWidth">
          <el-input v-model="form.countryAddress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="公司省份" :label-width="formLabelWidth">
        <el-cascader
            v-model="form.name"
            :options="options"
            @change="handleChange"></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <!--  修改  -->
    <el-dialog title="修改" :visible.sync="updialogFormVisible">
      <el-form :model="upform">
        <el-form-item label="公司名称" :label-width="formLabelWidth">
          <el-input v-model="upform.countryName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属行业" :label-width="formLabelWidth">
          <el-select v-model="upform.countryTid" placeholder="请选择活动区域">
            <el-option :label="obj.typeName" :value="obj.typeId" :key="obj.typeId" v-for="obj in typeList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="集团主席" :label-width="formLabelWidth">
          <el-input v-model="upform.chairmanGroup" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主营任务" :label-width="formLabelWidth">
          <el-input v-model="upform.mainBusiness" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司链接" :label-width="formLabelWidth">
          <el-input v-model="upform.countryWebaddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司地址" :label-width="formLabelWidth">
          <el-input v-model="upform.countryAddress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="公司省份" :label-width="formLabelWidth">
          <el-cascader
              v-model="upform.name"
              :options="options"
              @change="handleChange"></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data(){
    return{
      tableData:[],
      current:1,
      size:3,
      //总条数
      total:0,
      formInline:{
        pageNum:1,
        pageSize:3
      },
      //对话框
      dialogFormVisible:false,
      formLabelWidth:"120px",
      //添加
      form:{},
      //类型
      typeList:[],
      //级联
      options:[],
      value:[],
      //修改
      updialogFormVisible:false,
      upform:{},


    }
  },
  methods:{
    onSubmit(){
      this.axios.post("http://localhost:8005/country/countryList",this.formInline).then(res=>{
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      })
    },
    handleCurrentChange(current){
      this.formInline.pageNum = current;
      this.onSubmit()
    },
    //添加
    openadd(){
      this.dialogFormVisible = true
      this.onSubmit()
    },
    add(){
      this.axios.post("http://localhost:8005/country/countryAdd",this.form).then(()=>{
        this.dialogFormVisible = false
        this.$message.success("添加成功啦~")
      })
    },
    //类型查询
    typelist(){
      this.axios.post("http://localhost:8005/country/typeList").then(res=>{
        this.typeList = res.data.data
      })
    },
    //三级联动
    handleChange(){
      this.axios.post("http://localhost:8005/country/treeList").then(res=>{
        this.options = res.data.data
      })
    },
    //修改
    update(){
      this.axios.post("http://localhost:8005/country/updateCountry",this.upform).then(()=>{
        this.updialogFormVisible = false
        this.$message.success("修改成功")
      })
    },
    handleEdit(row){
      this.updialogFormVisible = true
      this.upform = row
      this.onSubmit()
    },
    //删除
    handleDelete(row){
      this.axios.delete("http://localhost:8005/country/delCountry?countryId=" + row.countryId).then(()=>{
        this.$message.success("删除成功啦!")
      })
    }
  },
  created() {
    //查询
    this.onSubmit()
    //类型查询
    this.typelist()
    this.handleChange()
  }
}

</script>

<style>
.list-container {
  width: 60%;
  margin: 0 auto;
}

</style>

